<template>
  <div class="app-container">
    <!-- 拓展服务 -->
    <div>
      <el-form :label-width="labelWidth" :model="searchModel" :inline="true">
        <span>账号：</span>
        <el-input style="width:2.2rem" v-model="searchModel.userName" placeholder=""></el-input>
        <span class='move-right'>姓名：</span>
        <el-input style="width:2.2rem" v-model="searchModel.password" placeholder=""></el-input>
        <el-button class="move-right" type="primary" @click="handleDownload">查询
        </el-button>
        <el-button style="margin-left:20px" @click="handleDownload">重置
        </el-button>
      </el-form>
      <!-- <el-button style="margin-top:20px;" @click="handleDownload">新增</el-button> -->
      <el-table style="margin-top:20px;" v-loading='listLoading' :data='list' element-loading-text='Loading' border fit
        highlight-current-row>
        <el-table-column align='center' label='序号'>
          <template slot-scope='scope'>
            {{ scope.$index }}
          </template>
        </el-table-column>
        <el-table-column label='账号' align='center'>
          <template slot-scope='scope'>
            <span>{{ scope.row.menj }}</span>
          </template>
        </el-table-column>
        <el-table-column label='姓名' align='center'>
          <template slot-scope='scope'>
            <span>{{ scope.row.bianh }}</span>
          </template>
        </el-table-column>
        <el-table-column label='电话' align='center'>
          <template slot-scope='scope'>
            {{ scope.row.fangx }}
          </template>
        </el-table-column>
        <el-table-column class-name='status-col' label='状态' align='center'>
          <template slot-scope='scope'>
            <el-tag>{{ scope.row.status ? "启用" : "禁用" }}</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column align='center' prop='created_at2' label='操作' width='250'>
          <template slot-scope='scope'>
            <el-button size='mini' @click='handleEdit(scope.$index, scope.row)'>编辑</el-button>
            <el-button size='mini' type='danger' @click='handleDelete(scope.$index, scope.row)'>删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="block" style="margin-top:15px;">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
          layout=" prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
    
<script>
// import { getList } from '@/api/table'

export default {
  data() {
    return {
      listLoading: false,
      //获取输入的查询条件
      searchModel: {
        input: '',
        searchModel: '',
      },
      //获取新增的信息
      inputModel: {
        serviceName: '',
        codeName: '',
        urlName: '',
        checked: true,
        radio: '1',
      },
      //控制弹出层
      dialogFormVisible: false,
      labelWidth: "90px",
      labelHeight: "32px",
      tableData: [],
      count: 0,
      currentPage: 1,
      total: 20,
      pageSize: 5,
      //状态
      types: [
        {
          value: 0,
          label: '请选择'
        }, {
          value: 1,
          label: '启用'
        }, {
          value: 2,
          label: '禁用'
        },
      ],
      rules: {
        serviceName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
        codeName: [{ required: true, message: '请输入CODE', trigger: 'blur' }],
        urlName: [{ required: true, message: '请输入URL', trigger: 'blur' }],
        radio: [{ required: true, message: '请选择状态', trigger: 'blur' }],
      },

      list: [{
        menj: '东1号门',
        bianh: '12345',
        fangx: '进场',
        tuoz: '收费进出场',
        status: 1,
        cjsj: '2015-10-28 08:50:08',
        cjz: '管理员'
      }, {
        menj: '东2号门',
        bianh: '12343',
        fangx: '出场',
        tuoz: '收费进出场',
        status: 1,
        cjsj: '2015-10-28 08:50:08',
        cjz: '管理员'
      }, {
        menj: '西1号门',
        bianh: '43215',
        fangx: '双向',
        tuoz: '收费进出场',
        status: 1,
        cjsj: '2015-10-28 08:50:08',
        cjz: '管理员'
      }, {
        menj: '西2号门',
        bianh: '12345',
        fangx: '出场',
        tuoz: '无',
        status: 1,
        cjsj: '2015-10-28 08:50:08',
        cjz: '管理员'
      }, {
        menj: '停车场1号门',
        bianh: '13333',
        fangx: '出场',
        tuoz: '无',
        status: 0,
        cjsj: '2015-10-28 08:50:08',
        cjz: '管理员'
      }],
    }
  },
  created() {
  },
  methods: {
    // getList() {
    //   this.tableData = list.map((item, i) => {
    //     item.menj = item.menj
    //     item.bianh = item.bianh
    //     item.fangx = item.fangx
    //     item.tuoz = item.tuoz
    //     item.status = item.status
    //     item.cjsj = item.cjsj
    //     item.cjz = item.cjz
    //     return item
    //   })
    //   this.count = 1;
    // },
    handleSizeChange(v) {
      this.pageSize = v;
      this.currentPage = 1;
      this.getList();
    },
    handleCurrentChange(v) {
      this.currentPage = v;
      this.getList();
    },
    handleDownload() {
      this.dialogFormVisible = true;

    }, dialogDetermine() {

    }
  }
}
</script>
    
<style lang="scss" scoped>
.main {
  margin: 0.2rem;
  padding: 0.2rem;
}

.search-bar {
  margin-bottom: .2rem;
  text-align: left;
  // float: left;
  margin-left: 10%;
  margin-top: .9rem;
}

.block {
  margin-right: .2rem;
  display: flex;
  justify-content: flex-end;
}

.input-width {
  width: 404px;
}

.move-right {
  margin-left: .5rem;
}
</style>
    